@import url(https://fonts.googleapis.com/css?family=Arimo);

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body{
	background: #AEDCC0;
	font-family: 'Arimo', sans-serif;
}

.container{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-oriend: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	text-align: center;
}

.container h1{
	color: #373737;
}

.btn{
	background: #F6FEAA;
	width: 200px;
	padding: 15px;
	color: #373737;
	font-weight: bold;
	border-radius: 3em;
	box-shadow: 1px 1px 17px #373737;
	cursor: pointer;
	text-align: center;
	margin: 2em auto;
	-webkit-transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.btn__progress{
	padding: 5px;
	width: 500px;
	color: transparent;
}

.btn__progress--fill:after{
	content: '';
	margin: -25.9px -5px;
	position: absolute;
	display: block;
	background: #FCE698;
	padding: 0.98em;
	border-radius: 3em;
	-webkit-animation: fill 3.4s linear forwards;
	animation: fill 3.4s linear forwards;
}

.btn__complete{
	padding: 10px;
	width: 42px;
	color: transparent;
	pointer-events: none;
}

.btn__complete:after{
	font-family: FontAwesome;
	content: "\f00c";
	color: #373737;
	margin: -18px 3px;
	position: absolute;
	display: block;
}

@-webkit-keyframes fill{
	from{
		width: 0;
	}
	to{
		width: 470px;
	}
}

@keyframes fill{
	from{
		width: 0;
	}
	to{
		width: 470px;
	}
}
